import React, { useState } from "react";

import { useMantineTheme } from "@mantine/core";

import {
  NButton,
  NHighlight,
  NImage,
  NInput,
  NLoading,
  NMultiSelect,
  NProgress,
  NSelect,
  NSwitch,
  NText,
  NTextarea,
  NUpload,
  useToast,
} from "@/components/Uikit";
import { useForm } from "@mantine/form";

const ComponentsPage: React.FC = () => {
  const toast = useToast();
  const theme = useMantineTheme();
  // console.log(theme);
  const [textAreaValue, setTextAreaValue] = useState("");
  const form = useForm({
    initialValues: {
      password: "",
      telephone: "",
      email: "",
      areaCode: "",
      verificationCode: "",
    },
    validateInputOnChange: true,
  });
  return (
    <div className='wrap'>
      <NLoading visible={false}>
        <div>
          <div>----按钮----</div>
          <NButton
            btnType='primary'
            type='submit'
            size='lg'
            onClick={() => {
              alert("按钮点击");
            }}
          >
            主要大按钮
          </NButton>
          <NButton
            btnType='primary'
            type='submit'
            size='md'
            disabled
            onClick={() => {
              alert("按钮点击");
            }}
          >
            主要按钮中等禁用
          </NButton>
          <NButton
            btnType='primary'
            type='submit'
            size='xs'
            loading
            onClick={() => {
              alert("按钮点击");
            }}
          >
            主要按钮中等禁用
          </NButton>
        </div>
        <div>
          <NButton
            btnType='secondary'
            type='submit'
            size='lg'
            onClick={() => {
              alert("按钮点击");
            }}
          >
            次级按钮
          </NButton>
          <NButton
            btnType='secondary'
            type='submit'
            size='md'
            disabled
            onClick={() => {
              alert("按钮点击");
            }}
          >
            次级按钮中等禁用
          </NButton>
          <NButton
            btnType='secondary'
            type='submit'
            size='xs'
            loading
            onClick={() => {
              alert("按钮点击");
            }}
          >
            次级按钮中等禁用
          </NButton>
        </div>
        <div>
          <NButton
            btnType='tertiary'
            type='submit'
            size='lg'
            onClick={() => {
              alert("按钮点击");
            }}
          >
            三级按钮
          </NButton>
          <NButton
            btnType='tertiary'
            type='submit'
            size='md'
            disabled
            onClick={() => {
              alert("按钮点击");
            }}
          >
            三级按钮中等禁用
          </NButton>
          <NButton
            btnType='tertiary'
            type='submit'
            size='xs'
            loading
            onClick={() => {
              alert("按钮点击");
            }}
          >
            三级按钮中等禁用
          </NButton>
        </div>

        <div>
          <NButton
            btnType='secondary'
            onClick={() => {
              toast("显示普通toast");
            }}
          >
            显示普通toast
          </NButton>
        </div>
        <div>
          <NButton
            btnType='primary'
            onClick={() => {
              toast("successToast显示", "success");
            }}
          >
            successToast显示
          </NButton>
        </div>
        <div>
          <NButton
            btnType='secondary'
            onClick={() => {
              toast("errorToast显示", "error");
            }}
          >
            errorToast显示
          </NButton>
        </div>
        <div>
          <NButton
            btnType='tertiary'
            onClick={() => {
              toast("infoToast显示", "info");
            }}
          >
            infoToast显示
          </NButton>
        </div>

        <div>----输入框----</div>
        <NInput
          withAsterisk={false}
          label='这是label'
          className={"no-input-border"}
          // className={classNames(styles['no-input-border'])}
          styles={{
            input: {
              height: "60px",
              // border: 'none',
            },
          }}
          placeholder={"这是输入框的placeholder"}
          required
        />
        <NInput required label='必填' placeholder='必填 input' />
        <NInput error label='Input 错误' placeholder='Input 错误' />
        <div>----高亮----</div>
        <NHighlight highlight='this'>Highlight This, definitely THIS and also this!</NHighlight>

        <div>----开关----</div>
        <NSwitch defaultChecked label='I agree to sell my privacy' />
        <div>----进度条----</div>
        <NProgress value={50} />
        <div>----文本----</div>
        <NText size='xs'>这是一段xs文本text</NText>
        <NText size='sm'>这是一段sm文本text</NText>
        <NText size='md'>这是一段md文本text</NText>
        <NText size='lg'>这是一段lg文本text</NText>
        <NText size='xl'>这是一段xl文本text</NText>

        <div>---font-family ---(貌似对汉字无效)</div>
        <NText fm={0}>0.常规体文本text</NText>
        <NText fm={1}>11.中等文本text</NText>
        <NText fm={2}>22.中粗文本text</NText>
        <NText fm={3}>33.加粗文本text</NText>
        <NText fm={4}>44.黑色文本text</NText>
        <NText fm={5}>55.斜体文本text</NText>
        <NText fm={6}>66.中斜文本text</NText>
        <NText fm={7}>77.中粗文本text</NText>
        <NText fm={8}>88.加粗文本text</NText>
        <NText fm={9}>99.黑斜体文本text</NText>
        <div>----text输入框----</div>
        <NTextarea
          value={textAreaValue}
          onChange={(event) => setTextAreaValue(event.currentTarget.value)}
        ></NTextarea>
        <div>----单选----</div>
        <NSelect
          label='Your favorite library'
          placeholder='Pick value'
          data={["React", "Angular", "Vue", "Svelte"]}
        />
        <div>----多选下拉----</div>
        <NMultiSelect
          label='Your favorite libraries'
          placeholder='Pick value'
          data={["React", "Angular", "Vue", "Svelte"]}
        />
        <div>----图片----</div>
        <NImage
          className='act-img'
          src={require("@/assets/images/public/icon-info.png")}
          alt=''
          effect='blur'
          onClick={() => {
            alert("图片点击");
          }}
        />
        <div>----上传文件----</div>
        <NUpload
          onSuccess={(res: any) => {
            console.log(res.data?.url);
          }}
        >
          <NButton btnType='tertiary'>上传文件</NButton>
        </NUpload>
      </NLoading>
    </div>
  );
};

export default ComponentsPage;
